<template>
  <div>
    <slot name="header" />
    <p-table :pagination="false" bordered :columns="columns" :datp-source="tableData" style="margin-bottom: 20px;">
      <div class="span-ellipsis" slot="day" slot-scope="row">
        <p-input :maxLength="50" v-if="isStart" size="small" v-model="form.day" placeholder="请输入"></p-input>
        <span v-else :title="row.day">{{ row.day }}</span>
      </div>
    </p-table>
    <slot name="chart" />
    <slot name="submit" />
  </div>
</template>

<script>
import { timestampToDatetime } from '@/utils/util'
import process from '@/api/process'

const columns = [
  {
    title: '发起部门',
    key: 'departmentName',
    dataIndex: 'departmentName',
    ellipsis: true,
  },
  {
    title: '发起人',
    key: 'name',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    title: '发起日期',
    key: 'createTime',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    title: '请假天数',
    key: 'day',
    ellipsis: true,
    scopedSlots: { customRender: 'day' },
  },
]

export default {
  name: 'NQJLC',
  inject: ['action', 'processDefinitionKey', 'processInstanceId', 'taskId', 'isStart', 'START_FORM_KEY'],
  props: {
    curUserInfo: { type: Object, default: null },
    formDatas: { type: Array, default: () => ([]) }
  },
  data () {
    return {
      columns,
      tableData: [{ key: 1 }],
      form: {
        department: '',
        name: '',
        createTime: '',
        day: ''
      }
    }
  },
  mounted () {
    switch (this.action) {
      case 'create':
        this.beforeCreateSubmit()
        break
      default:
        this.afterCreate()
    }
  },
  methods: {
    beforeCreateSubmit () {
      this.form = {
        departmentName: this.curUserInfo.departmentName,
        name: this.curUserInfo.name,
        createTime: timestampToDatetime(Date.now(), 2),
        day: ''
      }
      this.$set(this.tableData, 0, Object.assign(this.tableData[0], this.form))
    },
    afterCreate () {
      const data = this.formDatas.find(data => data.formKey === this.START_FORM_KEY)
      this.form = Object.assign({}, data.variables)
      this.$set(this.tableData, 0, Object.assign(this.tableData[0], this.form))
    },
    getVariables () {
      if (this.isStart) {
        if (this.form.day) {
          return [true, this.form]
        } else {
          this.$message.warning('请输入请假天数')
          return [false]
        }
      } else {
        return [true, {}]
      }
    }
  }
}
</script>
